<template>
	<bm-overlay class="overlay_wrap" ref="customOverlay" pane="labelPane" @draw="draw">
		<div class="corner corner1">
			<img src="/img/bigScreen/19.png" alt="" />
		</div>
		<div class="corner corner2">
			<img src="/img/bigScreen/18.png" alt="" />
		</div>
		<div class="corner corner3">
			<img src="/img/bigScreen/20.png" alt="" />
		</div>
		<div class="corner corner4">
			<img src="/img/bigScreen/17.png" alt="" />
		</div>
		<div class="city">
			<div style="position: absolute;right:5px;top:5px;color: #fff;" @click="close">
				<i class="el-icon-close" ></i>
			</div>
			<div class="title">
				<img src="/img/bigScreen/13.png" alt="" style="width: 24px;height: 24px;display: block;margin-right: 10px;" />
				<div>{{deptName}}</div>
			</div>
			<div v-for="(item,index) in factorList" class="section">
				<div><img src="/img/bigScreen/21.png" alt="" /></div>
				<div class="isAbnormal" :class="{active:item.isAbnormal==1}">
					<span style="margin-right: 10px;">{{item.alias}}</span>
					<span>{{item.collectValue?item.collectValue:0}} {{item.unit}}</span>
				</div>
			</div>
		</div>
	</bm-overlay>
</template>

<script>
	import $ from 'jquery'
	export default {
		data() {
			return {
                deptName:null,
                factorList:null
			}
		},
		props: ['position','dataInfo'],
		watch: {
			position: {
				handler() {
					this.$refs.customOverlay.reload()
					this.deptName=this.dataInfo.deptName
				},
				deep: true
			}
		},
		methods: {
			close(){
				this.$emit('close')
			},

			draw({el,BMap,map}) {
				if(!this.position) return false				
				let w=$(el).width()
				let h=$(el).height()
				const {lng,lat} = this.position
				const pixel = map.pointToOverlayPixel(new BMap.Point(lng, lat))				
				el.style.left = pixel.x - (w/2) + 'px'
				el.style.top = pixel.y - (h*1.3) + 'px'
				this.deptName=this.dataInfo.dataInfo.deptName
				this.factorList=this.dataInfo.dataInfo.factorList
			}
		}
	}
</script>

<style lang="scss">
	.overlay_wrap {
		min-width: 250px;
		background: rgba(0, 0, 0, .55);
		position: absolute;
		z-index: 100;
		border:1px solid rgba(31,48,61,0.65);
	}
	
	.corner {
		position: absolute;
		img {
			display: block;
			opacity: 1;
		}
	}
	
	.corner1 {
		left: -1px;
		top: -1px
	}
	
	.corner2 {
		right: -1px;
		top: -1px
	}
	
	.corner3 {
		left: -1px;
		bottom: -1px
	}
	
	.corner4 {
		right: -1px;
		bottom: -1px
	}
    .city{padding: 20px;color: #48e6cc;}	
    .title{margin-bottom: 10px;display: flex;align-items: center;}
    .section{display: flex;margin-bottom: 5px;font-size: 14px}	
    .isAbnormal{margin-left: 10px;}
    .isAbnormal.active{color: #FF4444;}    
</style>